<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <style>
        .container{
            padding-top: 150px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="form-inline">
            <div class="form-group">
                <select class="form-control" id="province">
                    <option>请选择省份</option>
                </select>
            </div>
            <div class="form-group">
                <select class="form-control" id="city">
                    <option>请选择城市</option>
                </select>
            </div>
            <div class="form-group">
                <select class="form-control" id="area">
                    <option>请选择县城</option>
                </select>
            </div>
        </div>
    </div>
    <script src="./js/ajax.js"></script>
    <script src="./js/template-web.js"></script>
    <script type="text/html" id="provinceTpl">
        <option>请选择省份</option>
        {{each province}}
        <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>

    <script type="text/html" id="cityTpl">
        <option>请选择城市</option>
        {{each city}}
        <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>
 
    <script type="text/html" id="areasTpl">
        <option>请选择县城</option>
        {{each areas}}
        <option value="{{$value.id}}">{{$value.name}}</option>
        {{/each}}
    </script>
    <script>
        var province = document.getElementById('province');
        var city = document.getElementById('city');
        var areas = document.getElementById('area');

        ajax({
            type:'get',
            url:'http://localhost:3000/province',
            success:function(data){
               var html =  template('provinceTpl',{province:data});
               province.innerHTML = html;
            }
        });
        province.onchange = function(){
            //清空县城下拉框数据
            var html =  template('areasTpl',{areas:[]});
            areas.innerHTML = html;
            //获取省份id
            var pid = this.value;
            //根据省份id获取城市信息
            ajax({
                type:'get',
                url:'http://localhost:3000/cities',
                data:{
                    id:pid
                },
                success:function(data){
                    var html =  template('cityTpl',{city:data});
                    city.innerHTML = html;
                }
            })
        };

        city.onchange = function(){
            //获取城市id
            var pid = this.value;
            //根据省份id获取城市信息
            ajax({
                type:'get',
                url:'http://localhost:3000/areas',
                data:{
                    id:pid
                },
                success:function(data){
                    var html =  template('areasTpl',{areas:data});
                    areas.innerHTML = html;
                }
            })
        }
    </script>
</body>
</html>